<template>
	<div>
		<!-- 路由跳转 -->
		<navigator url="/pages/detail/detail">navigate detail</navigator>
		<!-- 事件绑定和传参 -->
		<button type="primary" @click="toDetail(1001)">跳转detail页面</button>
		<!-- 轮播图组件 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item first">001</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item second">002</view>
			</swiper-item>
		</swiper>
		<!-- 列表循环 -->
		<view class="">
			<view class="item" v-for="(item,index) in list" :key="index">
				{{item}}
			</view>
		</view>
		
		<!-- 过滤器的使用 -->
		<view class="">
			<view class="item" v-for="(item,index) in goodsList" :key="item.id">
				<image mode="aspectFill" :src="item.img|getImage"></image>
				<text>{{item.goodsname}}</text>
			</view>
		</view>
		
	</div>
</template>

<script>
	export default {
		data(){
			return{
				list:["北京","上海","广州"],
				goodsList:[],			//商品列表
			}
		},
		// filters:{
		// 	getImage(value){
		// 		return "https://uapi.xqb.ink/"+value
		// 	}
		// },
		onLoad(){
			// 发送网络请求
			uni.request({
				url:"https://uapi.xqb.ink/api/getcategoods?fid=2",
				success:res=>{
					// console.log(res)
					this.goodsList=res.data.list
					
				}
			})
			
		},
		methods:{
			// 定义事件
			toDetail(id){
				uni.navigateTo({
					url:"/pages/detail/detail?id="+id
				})
			}
		}
		
	}
</script>

<style scoped>
	.item{
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #333;
		padding: 10rpx;
	}
	.item image{
		width: 200rpx;
		height: 200rpx;
	}
	.swiper-item{
		width: 750rpx;
		height: 400rpx;
	}
	.first{
		background: red;
	}
	.second{
		background: orange;
	}
</style>